<template>
    <el-form :model="orderSetting" label-width="120px" ref="searchFormRef" :rules="rules">
        <el-form-item label="秒杀订单超过" prop="normalOrderOvertime">
            <el-input v-model="orderSetting.normalOrderOvertime">
                <template #append>分</template>
            </el-input>
            <span>未付款，订单自动关闭</span>
        </el-form-item>

        <el-form-item label="正常订单超过" prop="flashOrde  rOvertime">
            <el-input v-model="orderSetting.flashOrderOvertime">
                <template #append>分</template>
            </el-input>
            <span>未付款，订单自动关闭</span>
        </el-form-item>

        <el-form-item label="发货超过" prop="finishOvertime">
            <el-input v-model="orderSetting.finishOvertime">
                <template #append>分</template>
            </el-input><span>未收货，订单自动完成</span>
        </el-form-item>

        <el-form-item label="订单完成超过" prop="confirmOvertime">
            <el-input v-model="orderSetting.confirmOvertime">
                <template #append>天</template>
            </el-input><span>自动结束交易，不能申请售后</span>
        </el-form-item>

        <el-form-item label="订单完成超过" prop="commentOvertime">
            <el-input v-model="orderSetting.commentOvertime">
                <template #append>天</template>
            </el-input><span>自动五星好评</span>
        </el-form-item>
        <div class="btn">
            <el-button type="primary" @click="submitForm(searchFormRef)">确定</el-button>
        </div>
    </el-form>

</template>
  
<script lang="ts" setup>
import { user } from '@/api';
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
import { reactive, ref, toRefs } from 'vue';

// 表单实例
const searchFormRef = ref<FormInstance>()

const rules = reactive({
    normalOrderOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    flashOrderOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    finishOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    confirmOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
    commentOvertime: [{ required: true, message: "时间不能为空", trigger: 'blur' }],
})


let List = reactive<shu>({
    orderSetting: {
        normalOrderOvertime: 0,
        commentOvertime: 0,
        confirmOvertime: 0,
        finishOvertime: 0,
        flashOrderOvertime: 0,
        id: 1,
    },
    id: 1
})



// 进来页面发起请求
user.getList(List.id).then(res => {
    if (res.code = 200) {
        List.orderSetting = res.data
    }
})


// 确认按钮
const submitForm = (searchFormRef: FormInstance | undefined) => {
    if (!searchFormRef) return
    searchFormRef.validate((valid) => {
        if (valid) {
            ElMessageBox.confirm("确定要保存吗").then(() => {
                user.updateList({ id: List.id, orderSetting: List.orderSetting }).then(res => {
                    if (res.code == 200) {
                        ElMessage.success("修改成功")
                    }
                })

            }).catch(() => {

            })
        } else {
            ElMessage.error('提交参数不合法')
            return false
        }
    })
}
let { orderSetting } = toRefs(List)
</script>

<style lang="less" scoped>
.el-form {
    width: 720px;
    margin: 0 auto;
    border: 1px solid rgb(236, 230, 230);
    padding: 50px;

    .btn {
        padding: 0 150px;
        // background: red;
        display: flex;

    }

    .el-form-item {
        display: flex;
        justify-content: space-between;

        .el-input {
            width: 250px;
        }

        span {
            color: black;
            margin-left: 20px;
        }
    }
}
</style>